<template>
  <div class="echart-container">
    <div class="Echarts">
			<div class="sn-flex sn-row-between">
				<div class="sn-flex" style="margin-bottom: 20px;">
					<span>图表类型</span>
					<el-select v-model="chartType" @change="initChartData"  placeholder="类型" style="width: 100px;margin-left: 10px;">
						<el-option :label="'柱形图'" :value="0"></el-option>
						<el-option :label="'层叠图'" :value="1"></el-option>
						<el-option :label="'折线图'" :value="2"></el-option>
						<el-option :label="'曲线图'" :value="3"></el-option>
						<el-option :label="'面积图'" :value="4"></el-option>
					</el-select>
				</div>
				<div style="color: #999;">
					（当前统计时间段：{{startDate}}至{{endDate}}）
				</div>
			</div>
			<div ref="charts" style="width: 100%;height:400px;"></div>
		</div>
  </div>
</template>

<script >
import {GetScanBottleCodesReqport} from '@/api/goodList';
import {parseTime} from '@/utils/index.js'
export default {
  data(){
    return {
      chartType:0,
      startDate:'',
      endDate:''
    }
  },
  mounted(){
    this.initChartData();
  },
  methods:{
    // 获取图表数据
		async initChartData(){
			let params = {
				endTime:new Date(),
				dimensionality:2,
				cycles:6,
				statisticalIndicator:0,
				statisticalOption:0,
				options:[
          {
            "id": "00000000-0000-0000-0000-000000000001",
            "name": "收入"
          },
          {
            "id": "00000000-0000-0000-0000-000000000002",
            "name": "支出"
          }
        ],
			};
			const res= await GetScanBottleCodesReqport(params);
			if(res.code === 200){
				this.startDate = parseTime(res.data.beginTime,'{y}-{m}-{d}');
				this.endDate = parseTime(res.data.endTime,'{y}-{m}-{d}');
				const series = res.data.series.map(item=>{
					let setConfig = {
						name:item.name,
						data:item.data,
						type:this.chartType <2?'bar':'line',
						smooth:this.chartType===3||this.chartType == 4?true:false,
					}
					if(this.chartType === 1){
						setConfig.stack = 'x';
					}
					if(this.chartType === 4){
						setConfig.stack = 'Total';
						setConfig.areaStyle = {};
						setConfig.emphasis={
							focus: 'series'
						}
					}
					return setConfig;
				});
				const legend = res.data.series.map(item=>item.name);
				var myChart = this.$echarts.init(this.$refs.charts);
				myChart.dispose();
				this.myEcharts(res.data.name,res.data.categories,series,legend,res.data.unit);
			}
		},
    // 图表生成
    myEcharts(title,xAxis,series,legend,unit){
			// 基于准备好的dom，初始化echarts实例
			var myChart = this.$echarts.init(this.$refs.charts);
			// 指定图表的配置项和数据
			var option = {
				title: {
					text: title
				},
				color:[
					'#c23531',
					'#2f4554',
					'#61a0a8',
					'#d48265',
					'#91c7ae',
					'#749f83',
					'#ca8622',
					'#bda29a',
					'#6e7074',
					'#546570',
					'#c4ccd3'
				],
				tooltip: {},
				legend: {
					data:legend
				},
				xAxis: {
					data:xAxis
				},
				yAxis: {
					axisLabel: {
						formatter: function (value, index) {
							return value + unit;
						}
					}
				},
				series: series
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option,true);
		}
  }
}
</script>

<style lang="scss" scoped>
.echart-container{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;;
}
</style>